<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="w-full">
    <section class="w-full pb-[40%] relative">
      <img
        :src="homeConfig?.banner?.pic || homeBanner"
        alt="home-banner"
        class="w-full h-full absolute top-0 left-0"
      />
      <div class="absolute top-0 left-0 w-full h-full">
        <div class="w-full max-w-300 mx-auto h-full pt-3 md:pt-10 lg:pt-30 xl:pt-50 px-3 lg:px-0">
          <p class="text-xl md:text-2xl lg:text-5xl font-bold gradient-text font-MiSans-Medium">
            {{ homeConfig?.banner?.title }}
          </p>
          <p
            class="text-sm md:text-lg lg:text-3xl font-bold mt-3 md:mt-5 lg:mt-10 font-MiSans-Regular"
          >
            {{ homeConfig?.banner?.content }}
          </p>
          <div class="flex gap-4 mt-3 md:mt-15 lg:mt-30">
            <p
              class="text-sm md:text-base px-3 md:px-6 py-2.5 md:py-3 bg-[#474846] text-white rounded-md leading-none md:cursor-pointer"
            >
              了解更多
            </p>
            <p
              class="text-sm md:text-base px-3 md:px-6 py-2.5 md:py-3 primary-bg rounded-md leading-none md:cursor-pointer"
              @click="apply"
            >
              立即申請
            </p>
            <!-- <a-button type="primary" style="height: 40px; padding: 4px 25px; background: #474846">
              了解更多
            </a-button>
            <a-button type="primary" size="large" style="padding: 4px 25px">立即申請</a-button> -->
          </div>
        </div>
      </div>
    </section>
    <!-- 内容部分 -->
    <section class="w-full max-w-300 mx-auto px-3 lg:px-0 py-10 md:py-20 lg:py-30 relative">
      <!-- 二图 + 数字 -->
      <div class="w-[67%] pb-[67%] relative ml-auto">
        <img src="../assets/images/home1.png" alt="" class="w-full h-full absolute top-0 left-0" />
        <div class="absolute w-[85%] pb-[64%] bottom-[-6%] right-0">
          <img
            :src="homeConfig?.index_content?.pic || home2"
            alt=""
            class="w-full h-full absolute top-0 left-0"
          />
        </div>
        <!-- 数字 -->
        <div
          class="absolute top-[14%] left-0 text-left md:text-right w-full transform translate-x-[-100px] translate-y-[-30px] lg:translate-x-0 lg:translate-y-0"
        >
          <p class="text-2xl md:text-4xl lg:text-6xl font-bold primary-color font-MiSans-Medium">
            {{ homeConfig?.index_content?.num1 }}
          </p>
          <p class="text-sm md:text-xl lg:text-3xl mt-3 lg:mt-5 primary-color">
            {{ homeConfig?.index_content?.title1 }}
          </p>
        </div>
      </div>
      <!-- 文字 -->
      <div class="md:absolute top-30 left-3 lg:left-0 w-full h-full">
        <div class="font-bold">
          <p
            class="text-xl md:text-4xl lg:text-6xl flex flex-col text-[#EFF2F7] font-MiSans-Heavy font-800"
          >
            <span class="font-MiSans-Heavy"> LAND </span>
            <span class="font-MiSans-Heavy">SURVEY</span>
          </p>
          <p
            class="font-MiSans-Medium text-sm md:text-xl lg:text-4xl transform -translate-y-7 mb-[-28px]"
          >
            {{ homeConfig?.index_content?.title }}
          </p>
        </div>
        <div class="max-w-105 leading-loose pt-3 md:pt-7 lg:pt-22">
          <p>
            {{ homeConfig?.index_content?.content }}
          </p>
          <ul class="text-sm mt-3 md:mt-6 lg:mt-10">
            <li
              class="leading-loose"
              v-for="label in homeConfig?.index_content?.label"
              :key="'label_' + label"
            >
              · {{ label }}
            </li>
          </ul>
        </div>
      </div>
    </section>
    <!-- 底部 -->
    <section class="w-full pb-[33%] relative mt-10">
      <img
        :src="homeConfig?.index_content2?.pic || homeFooter"
        alt="home-footer"
        class="w-full h-full absolute top-0 left-0"
      />
      <div
        class="w-full h-full absolute top-0 left-0 flex flex-col justify-center items-center text-white"
      >
        <p class="text-xl md: text-3xl lg:text-6xl font-bold">
          {{ homeConfig?.index_content2?.title }}
        </p>
        <p class="text-sm md:text-xl lg:text-3xl mt-5 lg:mt-10">
          {{ homeConfig?.index_content2?.content }}
        </p>
      </div>
    </section>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { theme } from 'ant-design-vue'
import { homeConfigApi } from '@/api'
import type { HomeConfigType } from '@/api/type'
import home2 from '../assets/images/home2.png'
import homeBanner from '../assets/images/home-banner.png'
import homeFooter from '../assets/images/home-footer.png'
const router = useRouter()

const { token } = theme.useToken()
const homeConfig = ref<HomeConfigType>()

const apply = () => {
  router.push('/signup')
}

onMounted(() => {
  homeConfigApi().then((res) => {
    homeConfig.value = res
    console.log(res, 'res')
  })
})
</script>

<style scoped>
.primary-color {
  color: v-bind('token.colorPrimary');
}
.primary-bg {
  color: #fff;
  background-color: v-bind('token.colorPrimary');
}
.gradient-text {
  /* 1. 设置字体（可选，这里用你之前提到的 MiSans-Medium） */
  font-family: 'MiSans-Medium', sans-serif;

  /* 2. 定义渐变背景 */
  background-image: linear-gradient(to right, #40a137, #e79c02); /* 从橙色到黄色的渐变 */

  /* 3. 关键步骤：将背景裁剪到文字区域 */
  -webkit-background-clip: text; /* 兼容 Safari/Chrome */
  background-clip: text;

  /* 4. 将文字颜色设为透明，让渐变背景显现 */
  color: transparent;
}
</style>
